<div th:fragment="sidebar">
  <style>
    /* 侧边栏整体样式 */
    aside {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 200px;
      background-color: #4CAF50;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
      z-index: 1000;
    }

    /* 侧边栏内部容器样式，用于更好地布局内容 */
    .sidebar-container {
      padding: 20px;
    }

    /* 侧边栏标题样式 */
    aside h2 {
      color: #fff;
      font-size: 1.2rem;
      margin-bottom: 20px;
    }

    /* 侧边栏导航列表样式 */
    aside nav ul {
      list-style-type: none;
      padding: 0;
    }

    /* 侧边栏导航链接样式 */
    aside nav a {
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      display: block;
      padding: 10px 0;
      transition: color 0.3s ease;
    }

    /* 鼠标悬停在导航链接上的样式 */
    aside nav a:hover {
      color: #dddddd;
    }

    /* 当前选中的链接样式（新增） */
    aside nav a.active {
      color: #ff5a92;
    }
  </style>

  <aside>
    <div class="sidebar-container">
      <h2>管理菜单</h2>
      <nav>
        <ul>
          <li><a href="/admin/index" th:class="${activeMenuItem == 'index'? 'active' : ''}">首页</a></li>
          <li><a href="/admin/userManage" th:class="${activeMenuItem == 'userManage'? 'active' : ''}">用户管理</a></li>
          <li><a href="/admin/concert/concertManage" th:class="${activeMenuItem == 'concertManage'? 'active' : ''}">演唱会管理</a></li>
          <li><a href="/admin/order/orderManage" th:class="${activeMenuItem == 'orderManage'? 'active' : ''}">订单管理</a></li>
          <li><a href="/admin/comment/commentManage" th:class="${activeMenuItem == 'commentManage'? 'active' : ''}">评论管理</a></li>
          <li th:if="${session.admin != null}"><a href="/admin/adminPersonal" th:class="${activeMenuItem == 'personalInfo'? 'active' : ''}">个人信息</a></li>
        </ul>
      </nav>
    </div>
  </aside>
</div>